<template>
	<view>
        <text class="price-icon" :style="'color: '+textColor+';font-size:'+(size/1.5)+'rpx;font-weight: '+fontWeight+';'">￥</text>
        <text class="price-text" :style="'color:'+textColor+';font-size:'+size+'rpx;font-weight: '+fontWeight+';'">{{ price | unitPrice('before')}}</text>
        <text class="price-text" :style="'color:'+textColor+';font-size:'+(size/1.5)+'rpx;font-weight: '+fontWeight+';'">.{{ price | unitPrice('after')}}</text>
	</view>
</template>

<script>

    /**
     * 价格展示组件
     *
     * ===== 使用场景 ======
     * 所有展示商品价格的地方
     *
     * ===== 参数 =====
     * price        展示金额
     * textColor    文字展示颜色（默认红色）
     * size         文字的大小(rpx，默认28rpx)
     * fontWeight   文字加粗(必须传数字)
     */
    import { Foundation } from '@/ui-utils/index.js'
	export default {
        props: {
            // 金额数值
            price: {
                type: [Number, String],
                default: 0
            },
            textColor: {
                type: String,
                default: "#ff5000"
            },
            size: {
                type: [Number, String],
                default: 28,
            },
            fontWeight: {
                type: [Number, String],
                default: 400,
            }
        },
        filters: {
            unitPrice(val, location) {
                let price = Foundation.formatPrice(val)
                if (!price) return
                if (location === 'before') {
                    return price.substr(0, price.length - 3)
                }
                if (location === 'after') {
                    return price.substr(-2)
                }
            }
        }
	}
</script>

<style>
</style>
